<template>
  <div class="RegisterPage">
    <h1>问卷系统</h1>
    <el-form
      ref="ruleFormRef"
      style="max-width: 400px; margin: 0 auto"
      :model="ruleForm"
      label-width="auto"
      size="large"
    >
      <el-form-item label="用户名" prop="name" required>
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="密码" prop="name" required>
        <el-input
          v-model="ruleForm.password"
          style="width: 100%"
          type="password"
          placeholder="Please input password"
          show-password
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="name" required>
        <el-input
          v-model="ruleForm.checkpassword"
          style="width: 100%"
          type="password"
          placeholder="Please input password"
          show-password
        />
      </el-form-item>
      <el-form-item label="生日" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker
              v-model="ruleForm.date1"
              type="date"
              aria-label="Pick a date"
              placeholder="Pick a date"
              :label-width="labelWidth"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="学历" prop="location" required>
        <el-segmented v-model="ruleForm.location" :options="locationOptions" />
      </el-form-item>
      <el-form-item label="性别" prop="resource" required>
        <el-radio-group v-model="ruleForm.gender">
          <el-radio value="male">男</el-radio>
          <el-radio value="female">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-button type="primary"> 注册 </el-button>
      <RouterLink to="/"><el-button style="margin-left: 80px">返回</el-button></RouterLink>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormProps } from 'element-plus'
const labelWidth = ref<FormProps['labelWidth']>('300px')
interface RuleForm {
  name: string
  password: string
  checkpassword: string
  date1: string
  location: string
  gender: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  password: '',
  checkpassword: '',
  date1: '',
  location: '本科',
  gender: 'male',
})
const locationOptions = ['大专', '本科', '研究生', '博士']
</script>

<style lang="less" scoped>
.RegisterPage {
  text-align: center;
  font-size: 30px;
  h1 {
    text-align: center;
    font-size: 100px;
    margin-bottom: 50px;
  }
  ::v-deep .el-form-item__label,
  .el-input,
  .el-button {
    font-size: 20px;
  }
}
</style>